<template>
  <div class="app-container">
    <!--操作按钮-->
    <div style="padding-bottom: 30px;" class="operation_container">
      <ul>
        <li>
          <el-button size="mini" @click="handleCancel">返回</el-button>
        </li>
        <li>
          <el-button size="mini" type="primary" @click="handleSubmit">保存</el-button>
        </li>
      </ul>
    </div>
    <!--折叠面板-->
    
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item name="basicInfo">
        <template slot="title">
          <span>基本信息</span>
          <i class="header-icon el-icon-info" />
        </template>
     <el-form ref="tbWmsMaterialReceiptForm" :model="tbWmsMaterialReceiptFormData" label-width="80px">
      <el-form-item label="" prop="sourceOrderNo">
        <el-input v-model="tbWmsMaterialReceiptFormData.sourceOrderNo"  />
        <el-col :span="1.5" style="float: right;">

            <el-button style="float: right;" type="primary" icon="el-icon-plus" size="mini" @click="openContractSelector">选择需要入库的订单</el-button>
            <purchase-order-selector :visible.sync="contractSelectorVisible" @selected="handleSelectedContract" />

         </el-col>
      </el-form-item>


       <el-form-item label="仓库" prop="warehouseCode">
         <el-input v-model="tbWmsMaterialReceiptFormData.warehouseCode" placeholder="请输入" />
       </el-form-item>
       <el-form-item label="客户编号" prop="customerNo">
         <el-input v-model="tbWmsMaterialReceiptFormData.customerNo" placeholder="请输入" />
       </el-form-item>
      <el-form-item label="客户名称" prop="customerName">
        <el-input v-model="tbWmsMaterialReceiptFormData.customerName" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="预入库区域" prop="consignmentLocation">
          <el-input v-model="tbWmsMaterialReceiptFormData.consignmentLocation" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="预入库时间" prop="preArrivedTime">
          <el-date-picker v-model="tbWmsMaterialReceiptFormData.preArrivedTime" type="date" value-format="yyyy-MM-dd" size="small" style="width: 200px" placeholder="选择" clearable />
        </el-form-item>
        <el-form-item label="卸货站台" prop="stageNo">
          <el-input v-model="tbWmsMaterialReceiptFormData.stageNo" placeholder="请输入" />
        </el-form-item>
      </el-form>

      </el-collapse-item>
      <el-collapse-item name="itemInfo">
        <template slot="title">
          <span>入库明细信息</span>
          <i class="header-icon el-icon-info" />
        </template>



        <el-divider />
        <el-table :data="tbWmsMaterialReceiptFormData.receitems" border stripe fit highlight-current-row>
          <el-table-column align="center" label="序" width="95">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="入库物料编码" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.materialNo }}</span>
            </template>
          </el-table-column>

          <el-table-column label="数量" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.quantity }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
            <template slot-scope="scope">

              <el-button type="text" @click="handleItemDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import appConstant from '@/constant/AppConstant'
  import TbWmsMaterialReceiptApi from '@/api/web/TbWmsMaterialReceiptApi'
   import PurchaseOrderSelector from '@/views/order/purchaseOrder/PurchaseOrderSelector'


  export default {
   name: 'TbWmsMaterialReceiptImport',
   components: {
     PurchaseOrderSelector
   },
    filters: {
      /* categoryFilter(item) {
        const values = appConstant.categoryList.filter(value => value.key === item)
        if (values && values.length > 0) {
          return values[0].label
        } else {
          return ''
        }
      } */
    },
    data() {
      return {
        activeNames: [
          'basicInfo',
          'itemInfo'
        ],
        selects: {

        },
        operation: undefined,
   contractSelectorVisible: false,
        tbWmsMaterialReceiptFormData: {
          orderNo: null,
            warehouseCode: null,
            receitems: [],
            customerNo: null,
            customerName: null,
            siteCode: null,
            status: '0',
            consignmentLocation: null,
            preArrivedTime: null,
            version: null,
            receiptNo: null,
            templateId: null,
            quantity: null,
            sourceType: null,
            sourceOrderNo: null,
            stageNo: null
          },
        // 校验规则的名称必须和校验字段的名称一致
        rules: {
          /*  departureIdList: [{ required: true, message: '_', trigger: 'change' }],
            destinationIdList: [{ required: true, message: '_', trigger: 'change' }] */
        },
        /*  materialSelectorVisible: false,
          fromSelectorVisible: false,
          toSelectorVisible: false,
          orgSelectorVisible: false,
          vehicleModelSelectorVisible: false, */


      }
    },
    created() {
     // this.initForm()
      this.loadSelects()
    },
    methods: {

      loadSelects() {
        /*  LocationApi.list().then(response => {
            this.selects.locationList = TreeUtils.list2Tree(response.data)
          }) */
      },
      openContractSelector() {
        this.contractSelectorVisible = true
      },
      handleSelectedContract(purchaseOrders) {
        if (purchaseOrders && purchaseOrders.length > 0) {
          for (let i = 0; i < purchaseOrders.length; i++) {
            const purchaseOrder = purchaseOrders[i]
            this.tbWmsMaterialReceiptFormData.customerNo = purchaseOrder.customerId
            this.tbWmsMaterialReceiptFormData.customerName = purchaseOrder.customerName
            if (purchaseOrder.items && purchaseOrder.items.length > 0) {
              for (let j = 0; j < purchaseOrder.items.length; j++) {
                const purchaseItem = purchaseOrder.items[j]
                this.tbWmsMaterialReceiptFormData.receitems.push({
                  materialNo: purchaseItem.spuId,
                  quantity: purchaseItem.qty
                })
              }
            }
          }
        }
      },
      handleSubmit() {

        // 将数组转为字符串


        TbWmsMaterialReceiptApi.addReceipt(this.data).then(response => {
          this.$message.success('新增入库计划成功！')
          this.$router.go(-1)
        })


      },
      handleCancel() {
        this.$router.go(-1)
      },
      handleChange(val) {
        console.log(val)
      },




    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
